<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>栏目编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>
    <script src="../js/pinyin.js"></script> 
    <style>
        .top_padding {
            padding: 5px 5px;
        }

        .sele {
            color: #009688;
            font-weight: bold;
            /* cursor: pointer; */
            line-height: 36px;
        }

        .red::after {
            content: "*";
            position: absolute;
            right: 10px;
            color: red;
            line-height: 20px;
        }
    </style>
</head>

<body>
    <form class="layui-fluid">
        <div class="layui-form layui-card-body" lay-filter="layuiadmin-form-node" id="layuiadmin-form-node"
            name="layuiadmin-form-node" style="background-color:white">
            <div id="nodeInfoView" class="top_padding">

            </div>
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="LAY-node-front-submit" id="LAY-node-front-submit"
                    value="保存">
                <input type="button" lay-cancel lay-filter="LAY-node-front-cancel" id="LAY-node-front-cancel"
                    value="取消">
            </div>
        </div>
    </form>

    <script type="text/html" id="nodeInfoTemp">
        <div class="layui-form-item">
            <label class="layui-form-label lab_width red">所属栏目：</label>
            <div class="layui-input-block">
                <div id="seleNode" class="sele">选择栏目</div>
            </div>
        </div>

    <div class="layui-form-item">
        <label class="layui-form-label lab_width red">栏目名称：</label>
        <div class="layui-input-inline">
            <input type="text" name="NodeName" id="NodeName" required lay-verify="required" placeholder="栏目名称"
                autocomplete="off" class="layui-input" value="{{d.info.NodeName||''}}">
        </div>
        <div class="layui-form-mid layui-word-aux">
            前端页面打开时显示的标题，栏目显示时的名称
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label lab_width red">栏目标识：</label>
        <div class="layui-input-inline">
            <input type="text" name="NodeCode" id="NodeCode" required lay-verify="required" placeholder="栏目标识"
                autocomplete="off" class="layui-input" value="{{d.info.NodeCode||''}}">
        </div>
        <div class="layui-form-mid layui-word-aux">
            唯一标识此栏目，显示在url中，只能是字母，请勿使用数字
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label lab_width">栏目描述：</label>
        <div class="layui-input-inline layui-show" id="itemPic">
            <textarea type="text" name="NodeDesc" id="NodeDesc" placeholder="栏目描述" autocomplete="off"
                class="layui-input" style="width:605px;height:60px">{{d.info.NodeDesc||''}}</textarea>
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="text" name="NID" id="NID" autocomplete="off" class="layui-input" value="{{d.info.NID||0}}">
        <input type="text" name="ParentID" id="ParentID" autocomplete="off" class="layui-input"
            value="{{d.info.ParentID||-1}}">
        <input type="text" name="NodeStatus" id="NodeStatus" autocomplete="off" class="layui-input"
            value="{{d.info.NodeStatus||1}}">
        <input type="text" name="NodeDepth" id="NodeDepth" autocomplete="off" class="layui-input"
            value="{{d.info.NodeDepth||0}}">
        <input type="text" name="NodeSort" id="NodeSort" autocomplete="off" class="layui-input"
            value="{{d.info.NodeSort||0}}">
    </div>
    </script>
    <script type="text/plain" id="upload_ue">
    </script>
</body>

</html>
<script>
    lobsterlayui.main(['index', 'layer', 'form', 'element'],{
		data: {
			$layui: null,
			NID: 0,//栏目编号
            parentNode: {},//父级栏目节点信息
            nodeInfo: {},//当前栏目节点信息
            opened: false,//是否弹出
		},
        _editor: null,//上传编辑器
		pageload: function (right) {
			var self = this;
                //获取初始化数据
                self.data.NID = parent.NID ? parent.NID : 0;
                self.data.parentNode = parent.parentNode;//父级栏目节点信息
                self.dataLoad(() => {
                    // self.loadLinked();
                });
                //控件
                self.initEvent();
                //验证
                layui.form.verify({});
		},

            //新增数据查询
            dataLoad: function (func) {
                var self = this;
                //默认参数
                var baseInfo = {
                    NID: 0,
                    NodeName: "",
                    NodeCode: '',
                    ParentID: self.data.parentNode.parentID,
                    NodeDepth: self.data.parentNode.Levels,
                    NodeDesc: '',
                    NodeStatus: 1,
                    NodeIcon: ''
                };
                //获取当前参数
                lobsterlayui.GETAPI('tsAdmin.getnodeandparentnode',{nid:self.data.NID}).then(retdata=>{
                        //基本信息
                        var nodeInfo = retdata.data.entity;
                        var parentnodeInfo = retdata.data.parentEntity;
                        self.data.nodeInfo = self.data.NID > 0 ? nodeInfo : baseInfo;

                        //重新绑定父级信息
                        var parentID = self.data.NID > 0 && nodeInfo ? nodeInfo.ParentID : self.data.parentNode.parentID;
                        var parentNodeName = self.data.NID > 0 && parentnodeInfo ? parentnodeInfo.NodeName : self.data.parentNode.parentNodeName;
                        var Levels = self.data.NID > 0 && parentnodeInfo ? parentnodeInfo.NodeDepth : self.data.parentNode.Levels;
                        self.data.parentNode.parentID = parentID
                        self.data.parentNode.parentNodeName = parentNodeName
                        self.data.parentNode.Levels = Levels
                        self.basebind(self.data.nodeInfo, parentNodeName);
                        if (func)
                            func();
                })

            },

            //基础信息加载
            basebind: function (nodeInfo, parentNodeName) {
                var infoTemp = nodeInfoTemp.innerHTML, infoview = document.getElementById('nodeInfoView');
                layui.laytpl(infoTemp).render({ info: nodeInfo }, function (html) {
                    infoview.innerHTML = html;
                    layui.form.render();
                });
                
                $("#seleNode").text(parentNodeName ? parentNodeName : "网站根栏目");
                
                layui.form.render();//重新渲染
            },
            //页面加载
            initEvent: function () {
                var self = this;
                
                //焦点失去时获取拼音
                $(document).on("blur", "#NodeName", function (e) {

                    var nodename = $(this).val();
                    var wd = pinyin.getFullChars(nodename);
                    if (!self.data.nodeInfo.NID || !$("#NodeCode").val()) {
                        $("#NodeCode").val(wd.toLowerCase());
                    }
                });
            },
        })

</script>